<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="./CSS/all.css">
    <title>病毒</title>
</head>

<body>
    <div class="container">
        <div class="header">
            <h1>病毒查询</h1>
        </div>
        <div class="search">
            <select class="selectMethod">
                <option checked>选择你的请求方式</option>
                <option value="axios">axios</option>
                <option value="jq">ajax</option>
                <option value="js">原生ajax</option>
            </select>
        </div>
        <div id="main" style="width: 600px;height:400px;margin: 0 auto;"></div>
        <div id="map"></div>
    </div>


    <script type="module">
        import * as method from './JS/everyMethod.js'
        window.onload = function () {
            $('.selectMethod').change(function (event) {
                    let url = `https://ncovdata.market.alicloudapi.com/ncov/cityDiseaseInfoWithTrend`
                    let value = event.target.value
                    if (value == 'jq') {
                        method.xmlFindJq('GET', url, jqXhrGetData)
                    } else if (value == 'axios') {
                        method.axiosFind('GET', url, axiosGetData)
                    } else if (value == 'js') {
                        method.xmlFindJs('GET', url, jsXhrGetData)
                    }
            })
            function axiosGetData(response) {
                exaggerateEcharts(response.data)


            }
            function jqXhrGetData(response) {
                exaggerateEcharts(response)

            }
            function jsXhrGetData(response) {
                exaggerateEcharts(JSON.parse(response))

            }

            function exaggerateEcharts(response) {
                let trend = response.trend
                var myChart = echarts.init(document.getElementById('main'));
                var option = {
                    title: {
                        text: '新冠数据报告'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['累计死亡人数', '累计治愈人数', '累计确诊人数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: trend.map(item => {
                            return item.day
                        })
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            stack: 'Total',
                            name: '累计死亡人数',
                            data: trend.map(item => {
                                return item.die_cnt
                            }),
                            type: 'line',
                            smooth: true
                        }, {
                            stack: 'Total',
                            name: '累计治愈人数',
                            data: trend.map(item => {
                                return item.cure_cnt
                            }),
                            type: 'line',
                            smooth: true
                        }, {
                            stack: 'Total',
                            name: '累计确诊人数',
                            data: trend.map(item => {
                                return item.sure_cnt
                            }),
                            type: 'line',
                            smooth: true
                        }
                    ]
                };
                myChart.setOption(option);
            }
        }

    </script>


</body>



</html>